/* Whatcom styles */
:root {
    --county-black: rgb(0,0,0);
    --county-black-transparent: rgba(0, 0, 0, 0.05);
    --county-blue: rgb(44, 73, 98);
    --county-gray: rgb(240, 240, 240);
    --county-gray-dark: rgb(200, 200, 220);
    --county-green: #03653D;
    --county-white: rgb(250,250,250);
    --county-white-transparent: rgb(250,250,250,0.25);
    --helion-white: rgb(225,225,225);
}

#website-body {
    --banner-image-width: 250px;
    --banner-image-width-small: 140px;
    --banner-background-color: var(--county-blue);
    --banner-foreground-color: var(--county-white);
    --banner-foreground-color-helion: var(--helion-white);
    --sidebar-background-color: var(--county-gray);
    --sidebar-background-color-top-row: var(--county-green);
    --sidebar-foreground-color-top-row: var(--county-white);
    --sidebar-link-background-color: inherit;
    --sidebar-link-foreground-color: var(--county-black);
    --sidebar-link-background-color-active: var(--county-white-transparent);
    --sidebar-link-foreground-color-active: var(--county-white-transparent);
    --sidebar-link-background-color-hover: var(--county-black-transparent);
    --sidebar-link-foreground-color-hover: var(--county-black);
    --sidebar-link-foreground-color-top-row: var(--county-white);
}

@media(min-width: 1050px){
    #website-body #county-banner {
        display: grid;
        grid-template-columns: var(--banner-image-width) auto 350px;
        grid-template-rows: auto auto;
    }

    #banner-item-1 {
        grid-row: 1/3;
        grid-column: 1;
    }

    #banner-item-2 {
        grid-row: 1;
        grid-column: 2;
        font-size: 1.75rem;
    }

    #banner-item-3 {
        grid-row: 1;
        grid-column: 3;
    }

    #banner-item-4 {
        grid-row: 2;
        grid-column: 3;
    }

    #banner-item-3,
    #banner-item-4 {
        display: initial;
        text-align: right;
        width: 100%;
        padding-right: 10px;
    }
}

@media(min-width: 780px) and (max-width: 1049px) {
    #website-body #county-banner {
        display: grid;
        grid-template-columns: var(--banner-image-width) auto;
        grid-template-rows: auto auto;
    }

    #banner-item-1 {
        grid-row: 1/3;
        grid-column: 1;
    }

    #banner-item-2 {
        grid-row: 1;
        grid-column: 2;
        font-size: 1.75rem;
    }

    #banner-item-3 {
        grid-row: 2;
        grid-column: 2;
        display: none;
    }
}

@media(max-width: 779px) {
    #banner-item-3,
    #banner-item-4 {
        display: none;
    }
}

#banner-item-3 {
    font-size: 24px;
}

#banner-item-4 a {
    color: var(--county-white);
    font-size: 13px;
    text-decoration: none;
}

#banner-item-4 strong {
    padding: 5px;
}

#banner-item-4 strong:hover {
    background-color: var(--county-white-transparent);
    border-radius: 2px;
}

#website-body a.navbar-brand {
    display: flex;
    align-items: center;
}